<template>
    <div class="news_con white_bg">
        <div class="new_img"><img src="../../images/news.png"></div>
        <div class="news_text">
            <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide v-for="item in headList" :key="item">
                    <p>
                        <span v-if="item.indexOf('代金券')>0">代金券</span>
                        <span v-else-if="item.indexOf('折扣券')>0">折扣券</span>
                        <span v-else-if="item.indexOf('抵用券')>0">抵用券</span>
                        {{item}}
                    </p>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
    import getData2 from '../../service/getData2.js'
    export default {
        name:"news",
        data() {
            return {
                swiperOption: {
                    autoplay: 3000,
                    direction : 'vertical',
                    pagination : '.swiper-pagination',
                    loop:true,
                    height:48
                },
                headList:[]
            }
        },
        created:function(){
            var me=this;
            getData2.headlines({}).then(function(rep){
                me.headList=rep.content.headLine;
//                console.log(me.headList)
            })
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
    }
</script>
<style scoped>
    .news_con{overflow: hidden;color:#666; padding: 10px 1.334rem}
    .new_img{width: 45px;border-right:1px solid #dadada;padding-right:1rem;float: left; box-sizing: border-box;}
    .new_img img{width:100%;margin-top: 0.2rem;}
    .news_text{width: -webkit-calc(100% - 45px);float: left; height:45px; overflow: hidden;}
    .news_text p{overflow: hidden;text-overflow:ellipsis;padding-left:.6rem;line-height: 24px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 48px}
    .news_text p{font-size: 1rem}
    .news_text span{color:#666; font-weight: bold;font-size: 1rem;padding-right: 0.3rem}

</style>
